<template>
  <div>
    <!--条件筛选-->
    <TopFilter ref="topFilter" :list="topFilterList" :cols="3" labelWidth="110" @filterChange="changeHandle"
               @onCollapse="collapseHandle"></TopFilter>
    <!-- table -->
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :isSelectColumn="false"
      :onColumnsChange="columns => this.columns = columns">
      <template slot="controls">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="detailHandle(null,'add')">新增</el-button>
      </template>
    </FilterTable>

    <!-- 新增编辑窗口 -->
    <Drawer :visible.sync="visibleDrawer" :title="dialogTitle" destroyOnClose width="90%"
            :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <questionInfo v-model="initData" @close="closeHandler"/>
    </Drawer>

    <!-- 明细窗口 -->
    <Drawer :visible.sync="visibleDetail" :title="infoTitle" destroyOnClose width="90%"
            :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <detailInfo v-model="infoData" />
    </Drawer>

  </div>
</template>

<script>
  import {getQuestion} from '@/api/questionManage/question';
  import questionInfo from './questionInfo';
  import detailInfo from './detail';
  import { dictionary } from '@/utils/dictMixin';
    export default {
      name: "questionIndex",
      components: {questionInfo, detailInfo},
      mixins: [dictionary],
      data() {
        return{
          topFilterList: this.createTopFilterList(),
          columns: this.createTableColumns(),
          fetchApi: getQuestion,
          fetchParams: { xhrAbort: true },
          visibleDrawer: false,
          handleType: '',
          searchData: {},
          title: '配件信息',
          infoTitle: '明细',
          dialogTitle: '',
          visibleDetail: false,
          initData: {},
          infoData: {}
        };
      },
      methods: {
        createTopFilterList() {
          return[
            {
              type: 'INPUT',
              label: '问题代码',
              fieldName: 'wxwtdm'
            },
            {
              type: 'INPUT',
              label: '问题内容',
              fieldName: 'wxwtnr'
            },
            {
              type: 'SELECT',
              label: '启用标记',
              fieldName: 'wxsfqy',
              placeholder: '请选择',
              itemList: this.createDictList('1003')
            }
          ]
        },
        createTableColumns () {
          return [
            {
              title: '操作',
              dataIndex: 'column-action',
              width: 100,
              fixed: 'left',
              render: props => {
                return (
                  <div>
                  <el-button disabled={(props.row.editDisable==='0')? true:false} size="mini" type="text" onClick={() => this.detailHandle(props.row, 'edit')}>
                  编辑
                  </el-button>
                  <el-divider direction="vertical" />
                  <el-button size="mini" type="text" onClick={() => this.detailInfo(props.row, 'info')}>
                  明细
                  </el-button>
                </div>
                );
              }
            },
            {
              title: '序',
              dataIndex: 'index',
              width: 70,
              sorter: true,
              render: props => {
                return <span>{props.row.index + 1}</span>;
              }
            },
            {
              title: '问题代码',
              dataIndex: 'wxwtdm',
              sorter: true
            },
            {
              title: '问题内容',
              dataIndex: 'wxwtnr',
              sorter: true,
            },
            {
              title: '启用标记',
              dataIndex: 'wxsfqy',
              sorter: true,
              render: props => {    //编码转汉字
                return <span>{this.createDictText(props.row.wxsfqy, '1003')}</span>;
              }
            },
            {
              title: '问题类型',
              dataIndex: 'wxwtlx',
              sorter: true,
              render: props => {    //编码转汉字
                return <span>{this.createDictText(props.row.wxwtlx, '5018')}</span>;
              }
            },
            {
              title: '问题适用',
              dataIndex: 'wxwjsy',
              sorter: true,
              render: props => {    //编码转汉字
                return <span>{this.createDictText(props.row.wxwjsy, '5019')}</span>;
              }
            },
            {
              title: '数据来源',
              dataIndex: 'datafrom',
              sorter: true,
            },
            // {
            //   type: 'SELECT',
            //   label: '问题类型',
            //   fieldName: 'wxwtlx',
            //   placeholder: '请选择',
            //   itemList: this.createDictList('5018')
            // },
            // {
            //   type: 'SELECT',
            //   label: '问题适用',
            //   fieldName: 'wxwjsy',
            //   placeholder: '请选择',
            //   itemList: this.createDictList('5019')
            // },
          ]
        },
        changeHandle(val) {
          val.endTime && (val.endTime = val.endTime.split(' ')[0] + ' 23:59:59');
          this.fetchParams = Object.assign({}, this.fetchParams, val, {xhrAbort: false});
        },
        collapseHandle() {
          this.$nextTick(() => {
            this.BaseTable.EXECUTE_RESET_HEIGHT();
          });
        },
        closeHandler(type) {
          this.visibleDrawer = false
          if (type === 'refresh') {
            // 重新加载
            this.fetchParams = Object.assign({}, this.fetchParams);
          }
        },
        detailHandle(row,type) {
          if (type === 'edit') {
            this.dialogTitle = '问题编辑';
          } else {
            this.dialogTitle = '问题新增';
          }
          this.initData =  {
            type: type,
            data: row
          }; //行id
          this.visibleDrawer = true;
        },
        detailInfo(row,type) {
          this.infoData =  {
            type: type,
            data: row
          }; //行id
          this.visibleDetail = true;
        },
      }
    }
</script>

<style scoped>

</style>
